<template>
 
   <div class="tablists">
        <el-table
          :data="tableData"
          :cell-style="$rowstyle"
          :header-cell-style="$headerstyle"
          style="width: 100%"
        >
          <el-table-column type="index" label="序号" ></el-table-column>
          <el-table-column prop="product_plann.code" label="方案编号" ></el-table-column>
          <el-table-column prop="product_plann.name" label="方案名称" ></el-table-column>
          <el-table-column label="有效日期" >
            <template slot-scope="scope">
              <span>{{transDate(scope.row.effective_start)}}~{{transDate(scope.row.effective_end)}}</span>
              <!-- <el-button type="text" @click="handleLog(scope.row)" size="small">日志</el-button> -->
            </template>
          </el-table-column>
          <el-table-column prop="product_plann.one_class.name" label="一级分类" ></el-table-column>
          <el-table-column prop="product_plann.two_class.name" label="二级分类" ></el-table-column>
          <el-table-column prop="address" label="费用占比" ></el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope" v-if="tableData.lenth > 0">
              <el-button @click="handleDelte(scope.row)" type="text" size="small">删除</el-button>
              <el-button type="text" @click="handleChange(scope.row)" size="small">变更</el-button>
              <!-- <el-button type="text" @click="handleLog(scope.row)" size="small">日志</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination layout="prev, pager, next" :total="tableData.length"></el-pagination>
        </div>
      </div>
  
</template>

<script>
import moment from 'moment'
export default {
  name: 'addProduct',
  props: ['tableData'],
  data() {
    return {
      visible: false,
      interval: null,
      isMoving: false
    }
  },
  mounted() {
    
  },
  
  methods: {
    transDate(time){
      
     return moment.unix(String(time)).format('YYYY-MM-DD')
    },
    handleDelte(e){
      this.$emit('handleProductDelete',e)
    },
    handleChange(e){
      this.$emit('handleProductChange',e)
    },
    handleLog(e){

    }
  }
}
</script>

<style scoped>
.tablists {
    width: 95%;
    padding-left: 5%;
    margin-top: 20px;
  }
</style>
